<template>
	<view class="temp">
		<image class="bg" :src="config.bg.info" mode="aspectFill"></image>
		<view class="main">
			<view class="image01">
				<u-image :src="config.image01.info" width="300" height="300"></u-image>
			</view>
			<view class="text01">
				<text class="t1">{{config.text01.info}}</text>
				<view class="t2">
					<view class="button">
						我们已经在一起：{{days}}天
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</view>
				</view>
				<text class="t3" :user-select="true">{{config.text02.info}}</text>
			</view>
			<view class="image02">
				<u-image :src="config.image02.info" width="300" height="300"></u-image>
			</view>
		</view>
	</view>
</template>

<script>
	import { timeDiff } from "@/common/index.js"
	const date = new Date()
	const newTime = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`
	export default {
		props:['config'],
		data() {
			return {
				days: "",
			}
		},
		created() {
			const sta = this.config.time.info
			this.days = timeDiff(sta, newTime)
		}
	}
</script>

<style lang="scss" scoped>
	.temp {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba($color: #000000, $alpha: 0.1);

		.main {
			height: calc(100vh - 100px - var(--status-bar-height));
			background-color: rgba($color: #ffffff, $alpha: 0.6);
			border-radius: 16rpx;
			border: 2px solid rgba($color: #ffffff, $alpha: 0.5);
			box-shadow: 0 0 10px #999999;
			width: 650rpx;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.image01 {
				margin: 20rpx;
				width: 610rpx;
				display: flex;
				justify-content: start;
			}

			.image02 {
				margin: 20rpx;
				width: 610rpx;
				display: flex;
				justify-content: start;
				flex-direction: row-reverse;
			}

			.text01 {
				margin: 0 20rpx;
				display: flex;
				flex-direction: column;
				font-size: 30rpx;
				font-weight: bold;

				.t1 {
					text-align: left;
				}

				.t2 {
					margin: 20rpx 0;
					display: flex;
					justify-content: center;

					.button {
						background: linear-gradient(to left top, #c32c71 50%, #b33771 50%);
						border-style: none;
						color: #fff;
						width: 500rpx;
						height: 80rpx;
						text-align: center;
						line-height: 80rpx;
						font-weight: 600;
						outline: none;
						cursor: pointer;
						position: relative;
						padding: 0px;
						overflow: hidden;
						transition: all .5s;
						box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
					}

					.button span {
						position: absolute;
						display: block;
					}

					.button span:nth-child(1) {
						height: 3px;
						width: 200px;
						top: 0px;
						left: -200px;
						background: linear-gradient(to right, rgba(0, 0, 0, 0), #f6e58d);
						border-top-right-radius: 1px;
						border-bottom-right-radius: 1px;
						animation: span1 2s linear infinite;
						animation-delay: 1s;
					}

					@keyframes span1 {
						0% {
							left: -200px
						}

						100% {
							left: 200px;
						}
					}

					.button span:nth-child(2) {
						height: 70px;
						width: 3px;
						top: -70px;
						right: 0px;
						background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #f6e58d);
						border-bottom-left-radius: 1px;
						border-bottom-right-radius: 1px;
						animation: span2 2s linear infinite;
						animation-delay: 2s;
					}

					@keyframes span2 {
						0% {
							top: -70px;
						}

						100% {
							top: 70px;
						}
					}

					.button span:nth-child(3) {
						height: 3px;
						width: 200px;
						right: -200px;
						bottom: 0px;
						background: linear-gradient(to left, rgba(0, 0, 0, 0), #f6e58d);
						border-top-left-radius: 1px;
						border-bottom-left-radius: 1px;
						animation: span3 2s linear infinite;
						animation-delay: 3s;
					}

					@keyframes span3 {
						0% {
							right: -200px;
						}

						100% {
							right: 200px;
						}
					}

					.button span:nth-child(4) {
						height: 70px;
						width: 3px;
						bottom: -70px;
						left: 0px;
						background: linear-gradient(to top, rgba(0, 0, 0, 0), #f6e58d);
						border-top-right-radius: 1px;
						border-top-left-radius: 1px;
						animation: span4 2s linear infinite;
						animation-delay: 4s;
					}

					@keyframes span4 {
						0% {
							bottom: -70px;
						}

						100% {
							bottom: 70px;
						}
					}
				}

				.t3 {
					text-align: justify;
					height: 160rpx;
					line-height: 40rpx;
					overflow-y: scroll;
				}
			}
		}

		.bg {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			z-index: -100;
		}
	}
</style>
